﻿
@{
                /**/

                ViewBag.Title = "找小说";
}
<style>
    .yourclass {
        width: 820px;
        height: 140px;
        /*background-color: #81BA25;*/
        box-shadow: none;
        /*color: #fff;*/
    }

    .perso {
        padding: 10px;
    }
</style>
<div class="layui-row">
    <br />



    <div id="outpercent" class="layui-hide perso">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
            <legend>下载进度</legend>
        </fieldset>
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
        <br />
        <button class="layui-btn layui-btn-sm" id="houtai">后台下载</button>
    </div>

    <input type="hidden" id="curr_novel" value="" />

    <fieldset class="layui-elem-field layui-field-title" style="border-top:0px;">
        <legend style="float: left;height: 30px;line-height: 40px;">小说列表</legend>
        <form class="layui-form" action="" style="float:right;">
            <table>
                <tr>
                    <td>
                        <label class="layui-form-label">书名</label>
                    </td>
                    <td>
                        <input type="text" name="title" id="crawl_key" lay-verify="title" autocomplete="off" placeholder="请输入书名" class="layui-input">
                    </td>
                    <td>
                        &nbsp;&nbsp;
                        <button class="layui-btn" type="button" lay-filter="demo1">搜索</button>
                        &nbsp;&nbsp;
                        <a class="layui-btn layui-btn-primary layui-hide" href="/Crawl/download?path=text/纯禧贵妃20181215.txt" id="down_url">下载</a>
                    </td>
                </tr>
            </table>
        </form>
    </fieldset>
    <hr />
    <div>

        <table class="" id="test" lay-filter="test1"></table>
    </div>


    @*<button class="layui-btn" id="aaaa">测试</button>*@

</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="get">获取</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-hide" style="margin-left: 0px" lay-event="download">下载</a>
    <div class="display: inline-block layui-hide">正在获取资源<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 26px; color: #1E9FFF;"></i></div>
</script>

<script>


    function GetPercent(num, total) {
        /// <summary>
        /// 求百分比
        /// </summary>
        /// <param name="num">当前数</param>
        /// <param name="total">总数</param>
        num = parseFloat(num);
        total = parseFloat(total);
        if (isNaN(num) || isNaN(total)) {
            return "0%";
        }
        return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00) + "%";
    }



    //get_novel_type();
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , element = layui.element;



        ////触发事件
        //var active = {
        //    setPercent: function () {
        //        //设置50%进度
        //        element.progress('demo', '50%')
        //    }
        //    , loading: function (othis) {
        //        var DISABLED = 'layui-btn-disabled';
        //        if (othis.hasClass(DISABLED)) return;

        //        //模拟loading
        //        var n = 0, timer = setInterval(function () {
        //            n = n + Math.random() * 10 | 0;
        //            if (n > 100) {
        //                n = 100;
        //                clearInterval(timer);
        //                othis.removeClass(DISABLED);
        //            }
        //            element.progress('demo', n + '%');
        //        }, 300 + Math.random() * 1000);

        //        othis.addClass(DISABLED);
        //    }
        //};

        //$('.site-demo-active').on('click', function () {
        //    var othis = $(this), type = $(this).data('type');
        //    active[type] ? active[type].call(this, othis) : '';
        //});



        $('#houtai').on('click', function () {
            $('#houtai').addClass('layui-hide');
            layer.closeAll();
        })





        var table = layui.table;
        layer.msg('正在获取数据，请耐心等候', {
            icon: 16
            , shade: 0.01
            , time: 3600000 //设置关闭时间 3600000 毫秒（如果不配置，默认是3秒）
        });
        table.render({
            elem: '#test'
            , url: '/Crawl/GetXiaoShuo/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                { field: 'Name', width: '20%', title: '文章名称', sort: true }
                , { field: 'ZuoZhe', width: '15%', title: '作者' }
                , { field: 'Count', width: '10%', title: '字数', sort: true }
                , { field: 'UpdateNew', width: '10%', title: '更新' }
                , { field: 'Status', width: '10%', title: '状态' }
                , { field: 'Content_Url', width: '20%', title: '详情链接' }
                , { fixed: 'right', title: '操作', width: '15%', align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
            ]]
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
                layer.closeAll();
            }
        });

        //监听工具条
        table.on('tool(test1)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除吗？', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    Del_Content(obj.data.c_id);
                });
            } else if (layEvent === 'get') { //获取
                if ($('#curr_novel').val() != "") {
                    layer.alert("正在下载“" + $('#curr_novel').val() + "”，请稍后。");
                    return;
                }
                $('#curr_novel').val(tr[0].firstChild.firstChild.textContent);
                //showProgress(element, layer)
                //do something
                var btn_download = $(tr[0].lastChild.firstChild.children[1]);//下载按钮
                var btn_get =  $(tr[0].lastChild.firstChild.children[0]).addClass('layui-hide');//获取按钮
                btn_get.addClass('layui-hide');//获取按钮
                var load = $(tr[0].lastChild.firstChild.children[2]);//加载
                load.removeClass('layui-hide');//获取到下载按钮
                get_data(data.Content_Url, btn_download, btn_get, load);

            } else if (layEvent === 'download') { //下载
                //do something
            }
        });

    });
    var ttt;
    function showProgress(element, layer) {
        if ($("#curr_novel").val() == "") {
            return;
        }
        element.progress('demo', '0%');
        $('#outpercent').removeClass('layui-hide');
        $('#houtai').removeClass('layui-hide');
        //页面层-自定义
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            skin: 'yourclass',
            content: $('#outpercent')
        });
        var size = "0%";
        ttt = setInterval(function () {
            $.ajax({
                async: true,
                url: '/Crawl/get_novel_size',
                data: {},
                success: function (res) {
                    if (res == "获取完成") {

                        element.progress('demo', '100%');
                        clearInterval(ttt);//注销事件
                        layer.closeAll();
                    } else {
                        var arr = res.split(';');
                        if(arr[1]!='0')
                            size = GetPercent(parseInt(arr[0]), arr[1]);

                        element.progress('demo', size);


                    }
                }
            })
        }, 3000);
    }

    function get_data(url, download, btn_get, load) {

        layer.msg('正在获取，预计需要几分钟，请耐心等候', {
            icon: 16
            , shade: 0.01
            , time: 2000 //设置关闭时间 3600000 毫秒（如果不配置，默认是3秒）
        });


        $.ajax({
            async: true,
            url: "/Crawl/Get_Data",
            data: { crawl_key: url },
            type: "GET",
            dataType: "text",
            success: function (data) {
                layer.closeAll('loading');
                if (data === "fail") {
                    clearInterval(ttt);//注销事件
                    $('#curr_novel').val("");
                    layer.closeAll();
                    layer.alert("获取失败，请稍后重试");
                    load.addClass('layui-hide');
                    btn_get.removeClass('layui-hide');
                } else {
                    clearInterval(ttt);//注销事件
                   
                    download.removeClass("layui-hide");
                    download.attr('href', '/Crawl/download?path=' + data);
                    layer.alert("“" + $('#curr_novel').val() + "”获取完成，请点击下载");
                    $('#curr_novel').val("");
                }
            },
            error: function () {
                layer.alert("获取失败，出现异常");
                layer.closeAll('loading');
            }
        });
    }




</script>
